<template>
  <div class="log_bg">
    <div class="top">
      <div class="logo">
        <a href="Index.html"
          ><img src="http://192.168.1.146:8088/logo.png"
        /></a>
      </div>
    </div>
    <div class="regist">
      <div class="log_img">
        <img
          src="http://192.168.1.146:8088/l_img.png"
          style="max-width: 100%; height: auto"
        />
      </div>
      <div class="reg_c">
        <form style="height: 100%">
          <table
            border="0"
            style="
              width: 420px;
              font-size: 14px;
              margin-top: 20px;
              height: auto;
            "
            cellspacing="0"
            cellpadding="0"
          >
            <tr height="50" valign="top">
              <td width="95">&nbsp;</td>
              <td>
                <span class="fl" style="font-size: 24px">注册</span>
                <span class="fr"
                  >已有商城账号，<router-link style="color: #ff4e00" to="/login"
                    >我要登录</router-link
                  ></span
                >
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;
              </td>
              <td>
                <input
                  type="text"
                  v-model="user.loginName"
                  class="l_user"
                  @blur="checkLoginName()"
                />
                <span v-if="errors.loginName" :class="tipColor">{{
                  errors.loginName
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;昵称 &nbsp;
              </td>
              <td>
                <input
                  type="text"
                  v-model="user.userName"
                  class="l_user"
                  @blur="checkUserName()"
                />
                <span v-if="errors.userName" :class="tipColor">{{
                  errors.userName
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;密码 &nbsp;
              </td>
              <td>
                <input
                  type="password"
                  v-model="user.password"
                  class="l_pwd"
                  @blur="checkPassword()"
                />
                <span v-if="errors.password" :class="tipColor">{{
                  errors.password
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;
              </td>
              <td>
                <input
                  type="password"
                  v-model="user.confirmPwd"
                  class="l_pwd"
                  @blur="checkConfirmPwd()"
                />
                <span v-if="errors.confirmPwd" :class="tipColor">{{
                  errors.confirmPwd
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;
              </td>
              <td>
                <input
                  type="text"
                  v-model="user.email"
                  class="l_email"
                  @blur="checkEmail()"
                />
                <span v-if="errors.email" :class="tipColor">{{
                  errors.email
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;身份证号 &nbsp;
              </td>
              <td>
                <input
                  type="text"
                  v-model="user.identityCode"
                  class="l_user"
                  @blur="checkIdentityCode()"
                />
                <span v-if="errors.identityCode" :class="tipColor">{{
                  errors.identityCode
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;手机 &nbsp;
              </td>
              <td>
                <input
                  type="text"
                  v-model="user.mobile"
                  class="l_tel"
                  @blur="checkMobile()"
                />
                <span v-if="errors.mobile" :class="tipColor">{{
                  errors.mobile
                }}</span>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;性别 &nbsp;
              </td>
              <td>
                <label>
                  <input type="radio" name="sex" v-model="user.sex" value="1" />
                  <span>男</span>
                </label>
                <label>
                  <input type="radio" name="sex" v-model="user.sex" value="0" />
                  <span>女</span>
                </label>
              </td>
            </tr>
            <tr height="50">
              <td align="right">
                <font color="#ff4e00">*</font>&nbsp;邮箱验证码 &nbsp;
              </td>
              <td>
                <input type="text" v-model="emaliCode" class="l_ipt" />
                <a
                  href="#"
                  @click.prevent="getCode()"
                  style="font-size: 12px; font-family: '宋体'"
                  >获取验证码</a
                >
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td style="font-size: 12px; padding-top: 20px">
                <span style="font-family: '宋体'" class="fl">
                  <label class="r_rad"><input type="checkbox" /></label
                  ><label class="r_txt">我已阅读并接受《用户协议》</label>
                </span>
              </td>
            </tr>
            <tr height="60">
              <td>&nbsp;</td>
              <td>
                <input
                  type="submit"
                  value="立即注册"
                  class="log_btn"
                  @click.prevent="regist()"
                />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserRegist",
  data() {
    return {
      user: {
        loginName: "",
        userName: "",
        password: "",
        confirmPwd: "",
        sex: 1,
        identityCode: "",
        email: "",
        mobile: "",
      },
      errors: {
        loginName: "",
        userName: "",
        password: "",
        confirmPwd: "",
        identityCode: "",
        email: "",
        mobile: "",
      },
      tipColor: "red",
      emaliCode: "",
    };
  },
  methods: {
    checkLoginName() {
      if (this.user.loginName == "") {
        this.errors.loginName = "用户名不能为空";
        this.tipColor = "red";
        return;
      }
      this.$axios
        .get("/api/user/checkLoginName", {
          params: {
            loginName: this.user.loginName,
          },
        })
        .then((response) => {
          if (response.data.checkStatus) {
            this.errors.loginName = "用户名可用";
            this.tipColor = "green";
          } else {
            this.errors.loginName = "用户名已存在";
            this.tipColor = "red";
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    checkUserName() {
      if (this.user.userName == "") {
        this.errors.userName = "昵称不能为空";
        this.tipColor = "red";
        return;
      }
      this.errors.userName = "";
    },
    checkPassword() {
      if (this.user.password == "") {
        this.errors.password = "密码不能为空";
        this.tipColor = "red";
        return;
      }
      this.errors.password = "";
    },
    checkIdentityCode() {
      if (this.user.identityCode == "") {
        this.errors.identityCode = "身份证号不能为空";
        this.tipColor = "red";
        return;
      }
      const reg =
        /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}(?:\d|X|x)$/;
      if (!reg.test(this.user.identityCode)) {
        this.errors.identityCode = "身份证号输入不合法";
        this.tipColor = "red";
        return;
      }
      this.errors.identityCode = "";
    },
    checkMobile() {
      if (this.user.mobile == "") {
        this.errors.mobile = "手机号不能为空";
        this.tipColor = "red";
        return;
      }
      const reg =
        /^(?:\+?86)?1(?:3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      if (!reg.test(this.user.mobile)) {
        this.errors.mobile = "手机号输入错误";
        this.tipColor = "red";
        return;
      }
      this.errors.mobile = "";
    },
    checkConfirmPwd() {
      if (this.user.confirmPwd == "") {
        this.errors.confirmPwd = "确认密码不能为空";
        this.tipColor = "red";
        return;
      }
      if (this.user.confirmPwd !== this.user.password) {
        this.errors.confirmPwd = "两次密码输入不一致";
        this.tipColor = "red";
        return;
      }
      this.errors.confirmPwd = "";
    },
    checkEmail() {
      const reg =
        /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?$/;
      if (this.user.email == "") {
        this.errors.email = "邮箱不能为空";
        this.tipColor = "red";
        return;
      }
      if (!reg.test(this.user.email)) {
        this.errors.email = "邮箱格式输入错误";
        this.tipColor = "red";
        return;
      }
      this.$axios
        .get("/api/user/checkEmail", {
          params: {
            email: this.user.email,
          },
        })
        .then((response) => {
          if (response.data.checkStatus) {
            this.errors.email = "邮箱已被使用";
            this.tipColor = "red";
          } else {
            this.errors.email = "邮箱可用";
            this.tipColor = "green";
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getCode() {
      if (this.errors.email !== "邮箱可用") {
        alert("请输入正确的邮箱地址");
        return;
      }
      this.$axios
        .get("/api/user/sendEmailCode", {
          params: {
            email: this.user.email,
          },
        })
        .then((response) => {
          if (response.data.sendStatus) {
            alert("验证码已成功发送");
          } else {
            alert("验证码发送失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    regist() {
      this.checkLoginName();
      this.checkUserName();
      this.checkPassword();
      this.checkConfirmPwd();
      this.checkEmail();
      this.checkIdentityCode();
      this.checkMobile();
      if (
        !(
          this.errors.loginName == "用户名可用" &&
          this.errors.userName == "" &&
          this.errors.confirmPwd == "" &&
          this.errors.email == "邮箱可用" &&
          this.errors.identityCode == "" &&
          this.errors.mobile == ""
        )
      ) {
        alert("请输入有效的注册信息！");
        return;
      }
      if (this.emaliCode == "") {
        alert("请输入有效的邮箱验证码");
        return;
      }
      this.$axios
        .get("/api/user/verifyEmailCode", {
          params: {
            email: this.user.email,
            emailCode: this.emaliCode,
          },
        })
        .then((response) => {
          if (response.data.verifyStatus) {
            this.$axios
              .post("/api/user/register", {
                loginName: this.user.loginName,
                userName: this.user.userName,
                password: this.user.password,
                sex: this.user.sex,
                identityCode: this.user.identityCode,
                email: this.user.email,
                mobile: this.user.mobile,
              })
              .then((response) => {
                if (response.data.addStatus) {
                  alert("注册成功");
                  this.$router.push("/login");
                } else {
                  alert("注册失败");
                }
              });
          } else {
            alert("邮箱验证码输入错误或已失效！");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.red {
  color: red;
}

.green {
  color: green;
}
</style>
